<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<div class="u-m-r-15">
					<div class="u-flex">
						<Unit v-model="searchData.unit" placeholder="请选择单位"></Unit>
						<Store v-if="searchData.unit.id" v-model="searchData.store" :unit="unit" placeholder="请选择门店"
							class="u-m-l-15"></Store>
					</div>
				</div>
			</div>
			<div class="right-panel">
				<div class="u-flex-1">
					<sc-select-filter :data="filterData" :label-width="80" @on-change="filterChange"></sc-select-filter>
				</div>
				<div class="u-flex-1">
					<el-date-picker v-model="searchData.start_date" type="datetime" :disabled-date="disabledDate"
						placeholder="选择日期" value-format="YYYY-MM-DD HH:mm:ss" @change="changeDate" />
				</div>
				<div class="u-flex-1">
					<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
				</div>
			</div>
		</el-header>
		<el-main class="nopadding">
			<div>
				<scTable ref="table" :apiObj="apiObj" :params="params" orderBy="sort" row-key="id"
					@selection-change="selectionChange" stripe :hideDo="true">
					<el-table-column type="selection" width="50" align="center"></el-table-column>
					<el-table-column label="设备名称" prop="name" align="center">
					</el-table-column>
					<el-table-column label="所属门店" prop="store.name" align="center">
					</el-table-column>
					<el-table-column label="设备在线状态" prop="online" align="center">
						<template #default="scope">
							<el-icon v-if="scope.row.online"
								style="color: #67C23A;"><el-icon-circle-check-filled /></el-icon>
							<el-icon v-else style="color: #F56C6C;"><el-icon-circle-close-filled /></el-icon>
						</template>
					</el-table-column>
					<el-table-column label="sn" prop="sn" align="center">
					</el-table-column>
					<el-table-column label="状态" prop="devStatus" align="center">
						<template #default="scope">
							<el-tag v-if="scope.row.devStatus" type="success" effect="dark" round>
								启用
							</el-tag>
							<el-tag v-else effect="dark" type="info" round>
								停用
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="操作" fixed="right" align="center" min-width="140">
						<template #default="scope">
							<el-button v-role="['SAQ','admin']" plain size="small"
								@click="table_manager(scope.row)">解绑</el-button>
							<el-button v-auths="['cam@edit','admin']" type="primary" plain size="small"
								@click="table_edit(scope.row)">编辑</el-button>

							<!-- <el-button plain size="small" @click="table_managerAdmin(scope.row)">店员审核</el-button> -->
							<el-button v-auths="['com@config','admin']" plain size="small"
								@click="table_config(scope.row)">功能配置</el-button>
							<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
								<template #reference>
									<el-button v-auths="['cam@delete','admin']" plain type="danger"
										size="small">删除</el-button>
								</template>
							</el-popconfirm>
						</template>
					</el-table-column>
				</scTable>
			</div>
		</el-main>
	</el-container>
</template>

<script>
	import scStatistic from '@/components/scStatistic'
	import scSelectFilter from '@/components/ShowTabData'
	import scEcharts from '@/components/scEcharts'
	export default {
		name: 'statistic',
		components: {
			scStatistic,
			scSelectFilter,
			scEcharts
		},
		data() {
			return {
				trendValue1: 7.7,
				trendValue2: -18.9,
				radio2: '进店客流',
				type: '1',
				apiObj: null,
				searchData: {
					store: {},
					unit: {},
					start_date: new Date,
					type: 'DAY' //YEAR 年统计， MONTH 月统计， WEEK 周统计， DAY 日统计
				},
				params: {
					unit: null,
					store: null,
					start_date: new Date,
					type: 'DAY'
				},
				filterData: [{
					title: "",
					key: "type",
					options: [{
							label: "今日",
							value: "today"
						},
						{
							label: "昨日",
							value: "yesterday"
						},
						// {
						// 	label: "近七日",
						// 	value: "pastWeek"
						// },
					]
				}, ],
			}
		},
		watch: {
			'searchData.unit'() {
				this.setParams()
				this.unit = this.searchData.unit.id
				this.$refs.table.upData(this.params)
			},
			'searchData.store'() {
				this.setParams()
				this.apiObj = this.$API.api.cam.heat
				//this.$refs.table.upData(this.params)
			}
		},
		created() {
			// 默认今天
			const defaultData = this.$TOOL.getDateRang('today','yyyy-MM-dd hh:mm:ss')
			this.params.start_date = this.searchData.start_date = defaultData[0]
		},
		methods: {
			// 今天时间之后的不能选择
			disabledDate(time) {
				return time.getTime() > Date.now();
			},
			//搜索
			upsearch() {
				this.$refs.table.upData()
			},
			// 日期选择
			changeDate(e) {
				this.params.start_date = e
				this.$refs.table.upData(this.params)
			},
			// 日期天选择
			changeMode() {
				this.search()
				this.params.mode = this.searchData.mode
				this.$refs.table.upData(this.params)
			},
			// 参数对应
			setParams() {
				this.params.unit = this.searchData.unit.id || null
				this.params.store = this.searchData.store.id || null
			},
			// 日期天选择回调
			filterChange(data) {
				const defaultData = this.$TOOL.getDateRang(data.type)
				this.params.start_date = this.searchData.start_date = defaultData[0]
				this.$refs.table.upData(this.params)
			}
		}
	}
</script>

<style scoped>
	.el-card {
		margin-bottom: 15px;
	}

	.up {
		color: #F56C6C;
		margin-left: 5px;
	}

	.down {
		color: #67C23A;
		margin-left: 5px;
	}
</style>
